<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<link rel="stylesheet" href="css/index.css" />
		<script src="js/vue.min.js"></script>
		<script src="js/elementui.js"></script>
		<script src="js/axios.min.js"></script>
		<script src="js/common.js"></script>


	</head>
	<body>
		<div id="app">
			<el-table :data="tableData" border style="width: 100%" size="mini">
				<el-table-column prop="rolename" label="角色名字" width="180">
				</el-table-column>
				<el-table-column prop="description" label="角色描述" width="180">
				</el-table-column>

				<el-table-column label="操作">
					<template slot="header" slot-scope="scope">
						<el-button type="primary" size="mini" @click="add(scope.$index, scope.row)">增加</el-button>
					</template>
					<template slot-scope="scope">
						<el-button size="mini" @click="uprole(scope.$index, scope.row)">编辑</el-button>
						<el-button type="warning" size="mini"
							@click="uprolemenu(scope.$index, scope.row)">角色菜单</el-button>

					</template>
				</el-table-column>

			</el-table>


			<el-drawer title="角色菜单维护" :visible.sync="drawer" :with-header="true">
				&nbsp;
				<el-button type="primary" size="mini" @click="uprolemenusubmit()">确定修改角色菜单</el-button>

				<el-tree ref="tree" :data="treeData" show-checkbox default-expand-all node-key="id" highlight-current>
				</el-tree>
			</el-drawer>

		</div>

		<script>
			new Vue({
				el: "#app",
				data: {
					tableData: [],
					drawer: false, //控制角色菜单维护抽屉的显示
					treeData: [],
				},
				methods: {
					initTableData() {
						let that = this
						axios.get(API + "selectrole").
						then(function(res) {
							console.log(res.data.data.roleList)
							that.tableData = res.data.data.roleList
						}).catch(err => {
							console.log(err)
						});
					},
					add() {

					},
					uprole() {

					},
					uprolemenusubmit(){
						
					},
					uprolemenu(i, row) {
						this.initTreeData() //初始化菜单树的数据
						//根据角色id获取菜单集合
						let that = this
						axios.get(API + "selectrolemenubyroleid/" + row.id).
						then(function(res) {
							let slist = res.data.data.rolemenuList
							const arr = slist.map((obj) => obj.menuid);//取数组里面对象的属性

							that.$refs.tree.setCheckedKeys(arr);

						}).catch(err => {
							console.log(err)
						});

						this.drawer = true
					},
					initTreeData() {

						let that = this
						axios.get(API + "selectmenu").
						then(function(res) {
							let arrs = arrayToTree(res.data.data.menuList)
							that.treeData = arrs
						}).catch(err => {
							console.log(err)
						});

					}
				},
				mounted() {
					this.initTableData()
				}
			})
		</script>

	</body>
</html>